<template>
  <div class="footer">
    <div v-if="!$route.meta.hide" class="container">
      <div class="item">
        <h3>买家服务</h3>
        <ul>
          <li class="active"><router-link to="/category" target="_blank">包装材料</router-link></li>
          <li class="active"><router-link to="/industryService/service" target="_blank">配套服务</router-link></li>
          <li class="active"><router-link to="/statyService" target="_blank">官方服务</router-link></li>
          <li class="active"><router-link to="/require" target="_blank">发布需求</router-link></li>
        </ul>
      </div>
      <div class="item">
        <h3>卖家服务</h3>
        <ul>
          <li class="active"><router-link to="/settled" target="_blank">入驻平台</router-link></li>
          <li class="active"><a href="">登录后台</a></li>
          <li class="active"><a href="">服务说明</a></li>
        </ul>
      </div>
      <div class="item">
        <h3>支付方式</h3>
        <ul>
          <li><p>线上支付</p></li>
          <li><p>线下支付</p></li>
        </ul>
      </div>
      <div class="item">
        <h3>规则与公告</h3>
        <ul>
          <li class="active"><router-link to="/help/center" target="_blank">平台规则</router-link></li>
          <li class="active"><router-link to="/help/center" target="_blank">帮助中心</router-link></li>
        </ul>
      </div>
      <div class="item">
        <h3>关于找包装网</h3>
        <ul>
          <li class="active"><router-link to="/help/center" target="_blank">关于我们</router-link></li>
          <li class="active"><p>平台服务</p></li>
          <li class="active"><p>在线客服</p></li>
        </ul>
      </div>
      <div class="item service">
        <h3>联系我们</h3>
        <ul>
          <li>
            电话：021-22222222
            <div style="margin-left: 40px;margin-top:10px;">13551351355</div>
          </li>
          <li>邮箱：19800000@mail.com</li>
          <li>地址：上海市</li>
        </ul>
      </div>
      <div class="item onfocus">
        <h3>关注我们</h3>
        <div class="pic-box">
          <div class="wx">
            <div class="code"><img src="~/assets/images/code.png" alt="" class="objectCover" /></div>
            <a href="" style="display:flex;align-items: center;justify-content: center;">
              <img src="~/assets/images/home/wx.png" width="20" height="20" style="margin-right:5px;" alt="" />
              微信公众号
            </a>
          </div>
          <div class="wb">
            <div class="code"><img src="~/assets/images/code.png" alt="" class="objectCover" /></div>
            <a href="" style="display:flex;align-items: center;justify-content: center;">
              <img src="~/assets/images/home/weibo.png" width="20" height="20" style="margin-right:5px;" alt="" />
              官方微博
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="foot-bottom">Copyright ©2019 xxxxxxxx邮箱公司 版权所有 沪ICP 备xxxxxxxxxxx号</div>
  </div>
</template>

<script>
export default {
  name: 'Footer'
};
</script>

<style scoped>
.footer {
  background-color: #565656;
  color: #fff;
}

.footer .container {
  display: flex;
  color: #fff;
  padding-bottom: 30px;
  justify-content: center;
}

.footer .container .item {
  flex: 1;
  text-align: left;
}

.footer .container .service,
.footer .container .onfocus {
  flex: 2;
  text-align: left;
}

.footer .container .item h3 {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  margin-top: 30px;
}

.footer .container .item ul {
  margin-top: 20px;
}

.footer .container .item ul li {
  font-size: 14px;
  margin-bottom: 10px;
}
/* .footer .container .item ul li:hover {
  color: #f8904a;
  cursor: pointer;
} */

.footer .container .service {
  padding-left: 26px;
}

.footer .container .service p {
  margin-top: 10px;
  margin-left: 42px;
}
.footer .container .active:hover {
  color: #f8904a;
  cursor: pointer;
}

.footer .container .onfocus .pic-box {
  margin-top: 28px;
  display: flex;
}

.footer .container .onfocus .pic-box > div {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.footer .container .onfocus .pic-box .code {
  width: 109px;
  height: 109px;
  padding: 7px 8px;
  background: #fff;
  margin-bottom: 10px;
}

.wb {
  margin-left: 13px;
}

.foot-bottom {
  text-align: center;
  height: 55px;
  line-height: 55px;
  color: #fff;
  font-size: 14px;
}
</style>
